import React, { createContext, useEffect, useState } from 'react';
import { Layout } from 'antd';
import './style/home.less';
import { IRouteComponentProps } from 'umi';
import { ViewportProvider } from '@/provider/viewport_context';
import { BlocBasicHeader } from '@/pages/blog/common/header/bloc_basic_header';
import { BlogGetSettingApi } from '@/service/blog/blog_setting_api';
import { BlogSettingType } from '@/type/blog_setting_blog';
import { BlogSettingContext } from '@/provider/blog_setting_context';
import { BlogAdListContext } from '@/provider/ad_list_context';
import { HomeContent } from '@/pages/blog/home/home_content';
import { BlocBasicFooter } from '@/pages/blog/common/footer/bloc_basic_footer';
import { useAdList } from '@/app_hook/useAdList';

export default (props: IRouteComponentProps) => {
  // 设置全局背景
  document.body.style.backgroundColor = '#a1db9b';
  const { Footer } = Layout;

  // 设置相关
  const [blogSetting, setBlogSetting] = useState<BlogSettingType>();

  // 获取博客设置
  useEffect(() => {
    BlogGetSettingApi().then((model) => {
      if (model.success) {
        setBlogSetting(model.data?.data);
      }
    });
  }, []);

  const [adList] = useAdList();

  // 首页
  return (
    <ViewportProvider>
      <BlogAdListContext.Provider value={adList}>
        <Layout>
          <BlocBasicHeader config={props} />
          <BlogSettingContext.Provider value={blogSetting}>
            <HomeContent children={props.children} />
          </BlogSettingContext.Provider>
          <Footer className="home_footer">
            {BlocBasicFooter(blogSetting?.icp_num ?? '')}
          </Footer>
        </Layout>
      </BlogAdListContext.Provider>
    </ViewportProvider>
  );
};
